<template>
	<view :style="{height:PhoneInfo.windowHeight + 'px',width:PhoneInfo.windowWidth + 'px'}">
		<u-toast ref="uToast"></u-toast>
		<view class="tag">
			<view class="waveclass" @click="waveshow=true;canvasshow=false">
				{{wavetext}}
			</view>
			<view class="wavetime" @click="getwavetime">{{wavedata.collectedTime}}
			</view>
		</view>
		<!-- 波形指标弹窗 -->
		<u-picker closeOnClickOverlay :immediateChange='true' @cancel="waveshow = false;canvasshow=true"
			@confirm="waveconfirm" :show="waveshow" :columns="wavecolumns" keyName="name">
		</u-picker>
		<!-- 波形时间弹窗 -->
		<u-picker closeOnClickOverlay :immediateChange='true' :title='wavetimetext'
			@cancel="wavetimeshow = false;canvasshow=true" @confirm="wavetimeconfirm" :show="wavetimeshow"
			:columns="wavetimecolimns" keyName="dataTypeName">
		</u-picker>
		<!-- 赋值排行 -->
		<view class="pinck" v-if="graphtype==2||graphtype==4">
			<u-collapse :border="false">
				<u-collapse-item title="幅值排行">
					<view class="pack">
						<view class="ph">Top5</view>
						<view class="fz">幅值(Pa)</view>
						<view class="hz">频率(Hz)</view>
					</view>
					<view class="pack" v-for="(item, index) in topFive" :key="index">
						<view class="ph">
							{{index+1}}
						</view>
						<view class="fz">{{item.y}}</view>
						<view class="hz">{{item.x}}</view>
					</view>
				</u-collapse-item>
			</u-collapse>
		</view>
		<!-- 声音和振动 -->
		<uni-ec-canvas v-show="canvasshow" class="uni-canvas" force-use-old-canvas="true" id="uni-ec-canvas"
			ref="canvas" canvas-id="uni-ec-canvas" :ec="ec">
		</uni-ec-canvas>
	</view>
</template>

<script>
	import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
	import * as echarts from '@/components/uni-ec-canvas/echarts'
	let chart = null
	export default {
		components: {
			uniEcCanvas
		},
		data() {
			return {
				canvasshow: true,
				PhoneInfo: '',
				ec: {
					lazyLoad: true, //是否懒加载
				},
				option: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					], //颜色
					toolbox: {
						show: true, //是否显示工具栏组件
						right: "3%", //左距离
						top: "30%", //上距离
						itemSize: 23, //工具大小
						orient: "vertical", //工具朝向
						itemGap: 20, //工具之间的间隔
						showTitle: false, //不显示标题
						feature: {
							dataZoom: {
								yAxisIndex: "none"
							},
							restore: {},
						}
					},
					tooltip: {
						show: true, //是否显示提示框组件
						trigger: 'axis',
						axisPointer: {
							type: 'cross' //十字准星指示器
						}
					},
					xAxis: {
						type: 'category', //类目轴
						axisTick: {
							alignWithLabel: true //保证刻度线和标签对齐
						},
						axisLine: {
							onZero: false, //X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效
							lineStyle: {
								color: "#000000" //x轴字体颜色
							}
						},
						axisPointer: { //x轴指示器
							label: {
								formatter: function(params) {
									return (
										params.value +
										(params.seriesData.length ? '：' + params.seriesData[0].data :
											'')
									);
								}
							}
						},
						data: [] //x轴的数据(时间)
					},
					grid: {
						top: '25%',
						bottom: '8%',
						left: '9%',
						right: '12%',
					},
					yAxis: {
						type: 'value',
						name: '',
						splitLine: {
							show: false
						},
					},
					series: [{
						name: '',
						type: 'line',
						yAxisIndex: 0,
						smooth: true,
						emphasis: {
							focus: 'series'
						},
						data: [],
						color: '',
					}]
				},
				userinfo: '',
				equipmentRealId: "",
				pointRealId: '',
				wavedata: '',
				graphtype: '',
				voviconeid: '',
				vovictwoid: '',
				vibrateid: '',
				topFive: '',
				//波形时间选择器
				wavetimetext: '',
				wavetimeshow: false,
				wavetimecolimns: [
					[]
				],
				//波形指标选择器
				wavetext: '',
				waveshow: false,
				wavecolumns: [
					[]
				],
			};
		},
		onLoad() {
			this.wavedata = this.$store.state.waveform;
			this.PhoneInfo = this.$utils.GetPhoneInfo();
			this.userinfo = uni.getStorageSync('userinfo');
			uni.setNavigationBarTitle({
				title: this.wavedata.name + '波形图'
			})
			this.equipmentRealId = this.wavedata.equipmentRealId;
			this.pointRealId = this.wavedata.pointRealId;
			//graphType=1是声音=3是振动
			//datatype=1/2声道1=4声道2
			if (this.wavedata.graphType == 1) {
				if (this.wavedata.dataType == 1 || this.wavedata.dataType == 2) {
					this.graphtype = 1;
					this.wavetext = '声道1-时域';
					this.voviconeid = this.wavedata.channelDataRealId;
				} else {
					this.graphtype = 3;
					this.wavetext = '声道2-时域';
					this.vovictwoid = this.wavedata.channelDataRealId;
				}
			} else {
				this.graphtype = 5;
				this.wavetext = '振动波形';
				this.vibrateid = this.wavedata.channelDataRealId;
			}
			this.$store.commit('alterwaveform', '');
		},
		onReady() {
			this.getServerData();
		},
		methods: {
			//请求波形图时间
			getwavetime() {
				//判断如果是记录列表传递进来的话,跳出方法
				if (this.wavedata.starttime == '' && this.wavedata.endtime == '') {
					return
				}
				var number = 0;
				if (this.graphtype == 5) {
					number = 3;
				} else {
					number = 1;
				}
				this.wavetimetext = this.wavedata.starttime + ' 至 ' + this.wavedata.endtime;
				uni.request({
					url: getApp().globalData.serverAddress + this.$uri.Uri_lookwaveformtime
						.replace(
							'{userRealId}', this.userinfo.userRealId)
						.replace('{equipmentRealId}', this.equipmentRealId)
						.replace('{pointRealId}', this.pointRealId) + '?StartTime=' +
						this.wavedata.starttime + '&EndTime=' + this.wavedata.endtime + '&graphType=' + number,
					method: "GET",
					success: (res) => {
						if (res.statusCode !== 200) {
							uni.showToast({
								icon: "none",
								title: "服务器错误,请联系技术支持人员!",
								mask: true,
							})
							return
						}
						if (res.data.code == 0) {
							for (let item of res.data.data) {
								item.channelName = number;
								if (item.dataType == 4) {
									item.dataTypeName = item.collectedTime + ' 声道2';
								} else if (item.dataType == 3) {
									item.dataTypeName = item.collectedTime;
								} else {
									item.dataTypeName = item.collectedTime + ' 声道1';
								}
							}
							this.wavetimecolimns[0] = res.data.data;
							this.wavetimeshow = true;
							this.canvasshow = false;
						} else {
							uni.showToast({
								icon: "none",
								title: res.data.msg,
								mask: true,
							})
						}
					},
					fail() {
						uni.showToast({
							icon: "none",
							title: "加载失败! ",
							mask: true,
						})
					}
				})
			},
			//波形时间确定
			wavetimeconfirm(e) {
				this.wavedata.collectedTime = e.value[0].collectedTime;
				if (e.value[0].channelName == 1) {
					if (e.value[0].dataType == 1 || e.value[0].dataType == 2) {
						this.graphtype = 1;
						this.wavetext = '声道1-时域';
						this.voviconeid = e.value[0].channelDataRealId;
					} else {
						this.graphtype = 3;
						this.wavetext = '声道2-时域';
						this.vovictwoid = e.value[0].channelDataRealId;
					}
				} else {
					this.graphtype = 5;
					this.wavetext = '振动波形';
					this.vibrateid = e.value[0].channelDataRealId;
				}
				this.getServerData();
				this.wavetimeshow = false;
				this.canvasshow = true;
			},
			//选择波形指标确定
			waveconfirm(value) {
				this.graphtype = value.value[0].id;
				this.wavetext = value.value[0].name;
				this.waveshow = false;
				this.canvasshow = true;
				this.getServerData();
			},
			//请求趋势图数据
			getServerData() {
				this.option.xAxis.data = [];
				this.option.series[0].data = [];
				uni.showLoading({
					title: "加载中...",
					mask: true,
				});
				setTimeout(() => {
					this.option.series[0].name = this.wavetext;
					if (this.graphtype == 5) {
						this.option.yAxis.name = this.wavetext + '(mm)';
					} else {
						this.option.yAxis.name = this.wavetext + '(Pa)';
					}
					this.option.series[0].color = this.option.color[this.graphtype - 1];
					this.getwave(this.graphtype)
				}, 1000);
			},
			//获取波形数据
			getwave(value) {
				var number = 0;
				var id = ''
				if (value == 1) {
					number = 1;
					id = this.voviconeid;
				} else if (value == 2) {
					number = 2;
					id = this.voviconeid;
				} else if (value == 3) {
					number = 1;
					id = this.vovictwoid;
				} else if (value == 4) {
					number = 2;
					id = this.vovictwoid;
				} else {
					number = 3;
					id = this.vibrateid;
				}
				uni.request({
					url: getApp().globalData.serverAddress + this.$uri.Uri_lookwaveform
						.replace(
							'{userRealId}', this.userinfo.userRealId)
						.replace('{equipmentRealId}', this.equipmentRealId)
						.replace('{pointRealId}', this.pointRealId)
						.replace('{channelDataRealId}', id) +
						'?graphtype=' + number,
					method: "GET",
					success: (res) => {
						if (res.statusCode !== 200) {
							this.$utils.showToast(this, '服务器错误,请联系技术支持人员!', 'error');
							return
						}
						if (res.data.code == 0) {
							this.option.series[0].data = res.data.data.datas;
							for (let item of res.data.data.categories) {
								if (value == 1 || value == 3) {
									this.option.xAxis.data.push(item + ' S')
								} else if (value == 2 || value == 4) {
									this.option.xAxis.data.push(item + ' Hz')
									this.topFive = res.data.data.topFivePinpu;
								} else {
									this.option.xAxis.data.push(item + ' S')
								}
							}
							//添加之前需要先清空
							this.wavecolumns = [
								[]
							];
							if (res.data.data.haveWave) {
								this.wavecolumns[0].push({
									id: 1,
									name: '声道1-时域',
								}, {
									id: 2,
									name: '声道1-频谱',
								})
							}
							if (res.data.data.haveWaveT) {
								this.wavecolumns[0].push({
									id: 3,
									name: '声道2-时域',
								}, {
									id: 4,
									name: '声道2-频谱',
								})
							}
							if (res.data.data.haveAdxl) {
								this.wavecolumns[0].push({
									id: 5,
									name: '振动波形',
								})
							}
							this.voviconeid = res.data.data.waveId;
							this.vovictwoid = res.data.data.waveTId;
							this.vibrateid = res.data.data.adxlId;
							this.$refs.canvas.init(this.initChart)
						} else {
							this.$utils.showToast(this, res.data.msg, 'error');
						}
					},
					fail() {
						this.$utils.showToast(this, "加载失败！", 'error');
					},
					complete() {
						uni.hideLoading();
					}
				})
			},
			// 绘制趋势图
			initChart(canvas, width, height, canvasDpr) {
				chart = echarts.init(canvas, null, {
					width: width,
					height: height,
					devicePixelRatio: canvasDpr
				})
				canvas.setChart(chart)
				chart.setOption(this.option)
				return chart
			},
		}
	};
</script>

<style lang="scss">
	.u-collapse-item__content__text {
		padding: 0px 15px !important;
	}

	.u-cell__title-text {
		font-size: 17px !important;
		color: #606266 !important;
	}


	.u-cell__body {
		width: 85%;
		font-size: 16px !important;
		padding: 5px 15px !important;
	}
</style>
<style lang="scss" scoped>
	/* 趋势图 */
	.uni-canvas {
		width: 100%;
		height: 100%;
	}

	.tag {
		width: 100%;
		position: fixed;
		z-index: 9999;
	}

	.waveclass {
		width: 20%;
		display: inline-block;
		height: 25px;
		line-height: 25px;
		font-size: 15px;
		text-align: center;
		color: #303133;
		border: 1px solid #303133;
		border-radius: 15px;
		margin-left: 10%;
	}

	.wavetime {
		width: 25%;
		display: inline-block;
		height: 25px;
		line-height: 25px;
		font-size: 15px;
		text-align: center;
		color: #303133;
		border: 1px solid #303133;
		border-radius: 15px;
		margin-left: 5%;
	}

	/* 幅值排行 */
	.pinck {
		width: 34%;
		position: fixed;
		z-index: 10000;
		top: 2%;
		right: 2%;
	}

	.pack {
		font-size: 15px;
		height: 25px;
		line-height: 25px;
	}

	.pack .ph {
		display: inline-block;
		width: 30%;
		text-align: center;
	}

	.pack .hz {
		display: inline-block;
		width: 30%;
		text-align: center;
	}

	.pack .fz {
		display: inline-block;
		width: 30%;
		text-align: center;
	}
</style>